<template>


    <div class="page-box">
       <div class="page-title">
          {{ '库存盘点审核' }}
       </div>
 
       <div class="page-search">
          <div class="search-box flex_start_center" :style="{ height: IsHeight }">
             <el-input v-model="search" placeholder="盘点单号/盘点仓库/盘点名称"
                style="width: 200px; margin-right: 10px; margin-bottom: 10px;" />
          </div>
 
          <div class="search-btn">
             <div class="btn_item" @click="handleClickHeight">
                <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
             </div>
      
  
          </div>
 
       </div>
       <div class="search-btn-right">
       
       </div>
    </div>
 
    <div class="table-box">
 
       <el-table :data="tabeData" style="width: 100%" v-loading="loading" border
           default-expand-all    >
           <el-table-column align="center" prop="code" label="盘点单号" width="160" >
            <template #default="scope">
                {{'psd21211'}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="盘点名称" >
            <template #default="scope">
               <div>{{  scope.row.title }}</div>
            </template>
          </el-table-column>
        

          <el-table-column align="center" prop="house_type_name" label="盘点日期" width="180" />
          <el-table-column align="center" prop="category_name" label="盘点仓库"  />
          <el-table-column align="center" prop="manager" label="盘点负责人" width="180" />
          
          <el-table-column align="center" prop="phone" label="备注"  />


          <el-table-column align="center" prop="phone" label="提交人" width="120" />
          <el-table-column align="center" prop="phone" label="提交时间" width="120" />

          <el-table-column align="center" prop="phone" label="操作" width="120" >
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleClickAudit(scope.row)">审核</el-button>
            </template>
          </el-table-column>

       </el-table>
    </div>
 
    <!-- 分页 -->
    <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
       :page-size="pageData.page_size" :total="total" />
        <examine v-model:dialogVisible="isShow" :dialogRow="dialogRow"  />
 </template>
 
 <script setup lang="ts">

 import { ref, onMounted, watch } from "vue";

 import Pagination from "@/components/Pagination.vue";
 import { ElMessageBox, ElMessage } from 'element-plus';
 import examine from "./components/InventoryReview/examine.vue";
 import api from "@/api";

 // 定义仓库数据类型
 interface Warehouse {
    id: string | number;
    title: string;
    code: string;
    house_type?: string;
    house_type_name?: string;
    category_name?: string;
    manager?: string;
    phone?: string;
    address?: string;
    remark?: string;
    parent_id?: string | number;
    parent_name?: string;
    children?: Warehouse[];
    create_time?: string;
    creator?: string;
    rowNumber?: number;
 }
 const DetailsVisible = ref<boolean>(false);

 let IsHeight = ref<number | string>(0);
 const isShow = ref<boolean>(false);
 const search = ref<string>('');
 let dialogType = ref<string>('');
 let dialogRow = ref<Warehouse>({} as Warehouse);
 const pageData = ref({
    page_size: 10,
    page: 1,
    house_type: "",
    category: "",
    keywords: "",
 });
 const total = ref(0);
 const tabeData = ref<Warehouse[]>([]);
 // 侦听动态分页
 watch(
    () => {
       return pageData.value;
    },
    () => {
       getAlltabeData();
    },
    { deep: true }
 );
 
 // 搜索关键词监听
 watch(
    () => search.value,
    (newVal) => {
       pageData.value.keywords = newVal;
       pageData.value.page = 1;
    }
 );

 
 let nub = ref<number>(0);
 const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
       IsHeight.value = '34px';
    } else {
       IsHeight.value = '0px';
    }
 }
 
 const pageSize = (e: number) => {
    pageData.value.page_size = e;
    getAlltabeData();
 }
 const getPage = (e: number) => {
    pageData.value.page = e;
    getAlltabeData();
 }
 onMounted(() => {
    getAlltabeData();
 })
 
 // 设置行样式

 // 获取仓库列表
 const getAlltabeData = async () => {
    loading.value = true;
    try {
      const res = await api.parking.getAll({
        ...pageData.value,
      });

      //模拟数据
      tabeData.value = [
         {
            id: 1,
            title: '主仓库',
            code: '123456',
            house_type_name: '仓库类型',
            category_name: '仓库类别',
            manager: '库管人员',
            phone: '联系电话',
            address: '仓库地址',
            remark: '备注',
            children: [ 
               {
                  id: 2,
                  title: '子仓库',
                  code: '123456',
                  house_type_name: '仓库类型',
                  category_name: '仓库类别',
               },
               {
                  id: 3,
                  title: '子仓库',
                  code: '123456',
                  house_type_name: '仓库类型',
                  category_name: '仓库类别',
               }
            ],
            create_time: '2021-01-01',
            creator: '创建人'
         }
      ]

      // if (res.code == 0) {
      //   // 处理父子仓库关系
      //   const mainWarehouses = res.data.data.filter(item => !item.parent_id);
      //   const subWarehouses = res.data.data.filter(item => item.parent_id);
        
      //   // 将子仓库添加到主仓库的children数组中
      //   mainWarehouses.forEach(main => {
      //     main.children = subWarehouses.filter(sub => sub.parent_id === main.id);
      //   });
        
      //   // 展开处理，先放主仓库，然后是它的子仓库
      //   const formattedData = [];
      //   mainWarehouses.forEach(main => {
      //     formattedData.push(main);
      //     if (main.children && main.children.length > 0) {
      //       formattedData.push(...main.children);
      //     }
      //   });
        
      //   tabeData.value = formattedData;
      //   total.value = res.data.total;
      // }
    } catch (error) {
      console.error('获取仓库列表失败', error);
    } finally {
      loading.value = false;
    }
 };
 
 const loading = ref(false);
 

 // 提交表单回调
 const handleSubmit = () => {
    getAlltabeData();
 }

const handleClickAudit = (row: Warehouse) => {
   isShow.value = true;
   dialogRow.value = row;
}
 
 </script>
 
 <style lang="scss" scoped>
 .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
 }
 
 .main-warehouse {
    font-weight: bold;
    color: #333;
 }
 
 // 输入框样式
 :deep(.el-input__wrapper) {
    background-color: rgba(250, 252, 251, 1);
 }
 
 //表格样式
 :deep(.el-table) {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
 }
 
 :deep(.el-table thead) {
    color: #444;
 }
 
 // 子仓库行样式
 :deep(.sub-warehouse-row) {
    background-color: #fef6e5;
 }
 
 //分页样式
 .pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;
 }
 
 :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #000 !important;
 }
 </style>
 